

<template>
    <div class="lgbox">
      <van-form ref="form" @submit="onSubmit" @failed="onFailed">
          <van-field
              v-model="form.username"
              name="username"
              label="账号"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
              center
              clearable
              left-icon="user-o"
            />

          <PassInput
            v-model="form.password"
          ></PassInput>

          <div style="margin: 16px;" class="btns">
            <van-button  round  type="info" native-type="submit">登录</van-button>
            <van-button  round  type="danger" native-type="reset">重置</van-button>
          </div>
          <div style="margin: 16px;">
           <div class="links">
             <router-link class="aitem aleft" to="/reg">注册</router-link>
             <router-link class="aitem aright" to="/findpass">找回密码</router-link>
           </div>
          </div>
        </van-form>
    </div>
</template>


<script>
import { todoLogin } from '@/api/api'
export default {
  data(){
    return {
      form:{}
    }
  },
  methods:{
    async onSubmit(value){
      console.log(value)
      let res = await todoLogin(value)
      if(res.code==200){
        // 把回调函数延迟到下一次DOM 更新之后执行  (必须等待真实DOM渲染完毕后再去操作DOM)
        this.$nextTick(()=>{
          this.ShowSuccess(res.msg)
          sessionStorage.setItem("token",res.token);
          localStorage.setItem("appName",value.username)
          this.gotopage('/ms/mine')
        })
      }else{
        this.ShowError(res.msg)

      }
    },
    onFailed(){
      this.ShowError('校验失败')
    }
  },
  mounted(){
    if(this.$route.query.username){
      this.$set(this.form,'username',this.$route.query.username)
    }else{
      this.$set(this.form,'username',localStorage.getItem('appName') )
    }
  }
}
</script>


<style lang="scss" scoped>
.lgbox{
  margin-top:20px;
  .btns{
    display: flex;

    .van-button{
      flex:1;
      margin:0 10px;
    }
  }
}
.links{
  margin-top:15px;
  .aitem{
    color:#000;
  }
  .aleft{
    color:orange;
  }
  .aright{
    color:#999;
  }
}
</style>
